<template>  
  <lay-col md="6"> <!-- 确保 lay-col 已被导入和注册 -->  
    <rightchart :data="props.data"></rightchart> <!-- 直接使用 props.data -->  
  </lay-col>  
  <lay-col md="12">  
    <div style="text-align: center; display: flex; justify-content: center; align-items: center;margin-top: 10%;">  
      <dv-decoration-9 style="width:150px; height:150px;"> <lay-count-up :startVal="0" :endVal="props.data.food" :decimalPlaces="1.1"></lay-count-up></dv-decoration-9>  
    </div>  
  </lay-col>  
  <lay-col md="6">  
    <leftchart :data="props.data"></leftchart> <!-- 直接使用 props.data -->  
  </lay-col>  
</template>  
  
<script lang="ts" setup>  
import { defineProps,watch } from 'vue';  
import leftchart from './leftchart.vue';  
import rightchart from './rightchart.vue';  
  
// 导入 lay-col 如果需要的话  
// import LayCol from './LayCol.vue'; // 假设 LayCol.vue 是 lay-col 的文件名  
  
interface IcentercmpProps {  
  data: any; // 根据实际情况指定更具体的类型  
}  
  
const props = defineProps<IcentercmpProps>();  
  
// 如果需要在 setup 中处理 props.data，可以在这里进行  
// 例如，使用 watch 监听 props.data 的变化  
  
// state 对象可能不再需要，除非它包含组件内部的其他状态  
// 如果确实需要，确保它与 props.data 分开，并适当使用  
  
// ... 其他逻辑 ...  
// watch(  
//   () => props.data,  
//   (newData, oldData) => {  
//     // 这里处理数据变化，比如重新渲染图表  
//     console.log('Data has changed:', newData);  
//   },  
//   { deep: true } // 如果 props.data 是深层嵌套的对象或数组，使用 { deep: true }  
// );  
</script>  
  
<style lang="less">  
/* 样式代码 */  
</style>